import * as React from "react";
import PropTypes from "prop-types";
import {Switch, Icon} from "@blueprintjs/core";

import './index.less';

const initState = {
    switchAdd: true,
    switchEdit: true,
    switchDelete: true,
    UserId: "",
    Password: "",
    Role: "User",
    Add: "1",
    Edit: "1",
    Delete: "1",
    permission: true,
}

class Model extends React.PureComponent {

    constructor(props) {
        super(props);
        this.handleHtmlSwitch = this.handleHtmlSwitch.bind(this);
        this.handleSwitchAdd = this.handleSwitchAdd.bind(this);
        this.handleSwitchEdit = this.handleSwitchEdit.bind(this);
        this.handleSwitchDelete = this.handleSwitchDelete.bind(this);
        this.init = this.init.bind(this);
        this.getValue = this.getValue.bind(this);

        this.state = initState
    }

    init() {
        const {initData} = this.props;
        if (Object.keys(initData).length > 0) {
            const { UserId, Password, Role, Add, Edit, Delete} = initData;
            const switchAdd = Add === "1";
            const switchEdit = Edit === "1";
            const switchDelete = Delete === "1";
            this.setState({ UserId, Password, Role, Add, Edit, Delete, switchAdd, switchEdit, switchDelete})
        }
    }

    componentDidMount() {
        this.init()
    }

    componentWillReceiveProps(nextProps, nextContext) {
       this.init()
    }

    handleHtmlSwitch(e) {
        if (e.target.value === "Admin") {
            this.setState({
                permission: false,
                Add: "1",
                Edit: "1",
                Delete: "1",
                switchAdd: true,
                switchEdit: true,
                switchDelete: true,
                Role: e.target.value
            })
        } else {
            this.setState({
                permission: true,
                Role: e.target.value
            })
        }
    }
    handleSwitchAdd() {
        this.setState({
            Add: !this.state.switchAdd ? "1": "0",
            switchAdd: !this.state.switchAdd
        })
    }
    handleSwitchEdit() {
        this.setState({
            Edit: !this.state.switchEdit ? "1": "0",
            switchEdit: !this.state.switchEdit
        })
    }
    handleSwitchDelete() {
        this.setState({
            Delete: !this.state.switchDelete ? "1": "0",
            switchDelete: !this.state.switchDelete
        })
    }

    handleInputValue(type, e) {
        switch (type) {
            case "UserId":
                this.setState({
                    UserId: e.target.value
                });
                break;
            case "Password":
                this.setState({
                    Password: e.target.value
                });
                break;
        }
    }

    getValue() {
        const { UserId, Password, Role, Add, Edit, Delete} = this.state;
        return { UserId, Password, Role, Add, Edit, Delete}
    }

    render() {
        const {type} = this.props;
        const {UserId, Password, Role, switchAdd, switchEdit, switchDelete, permission} = this.state;
        return(
            <div className="model">
                <div className="model-item">
                    <input className={`bp3-input .modifier + ${type === "edit" ? "bp3-disabled" : ""}`} type="text" placeholder="用户Id" dir="auto" onChange={(event)=> this.handleInputValue("UserId", event)} value={UserId}/>
                </div>
                <div className="model-item">
                    <input className="bp3-input .modifier" type="password" placeholder="密码" dir="auto" onChange={(event)=> this.handleInputValue("Password", event)} value={Password}/>
                </div>
                <div className="model-item">
                    <div className="bp3-select .modifier">
                        <div className="bp3-select-icon"><Icon icon={"caret-down"} iconSize={17} intent={""} /></div>
                        <select onChange={this.handleHtmlSwitch} value={Role}>
                            <option value="User">User</option>
                            <option value="Admin">Admin</option>
                            <option value="Visitor">Visitor</option>
                        </select>
                    </div>
                </div>
                {!!permission &&
                <div>
                    <div className="model-item">
                        <Switch checked={switchAdd} label="添加权限" onChange={this.handleSwitchAdd} />
                    </div>
                    <div className="model-item">
                        <Switch checked={switchEdit} label="修改权限" onChange={this.handleSwitchEdit} />
                    </div>
                    <div className="model-item">
                        <Switch checked={switchDelete} label="删除权限" onChange={this.handleSwitchDelete} />
                    </div>
                </div>}
            </div>
        )
    }
}

Model.propTypes = {
    type: PropTypes.string.isRequired,
    initData: PropTypes.object.isRequired,
};

export default Model;